<template>
    <div id="st_register">
        <div id="registerformBox">
            <header>
                <section>注册账号</section>
            </header>
            <el-form class="loginForm" :model="registerForm" :rules="rules" ref="registerForm">
                <el-form-item class="input_item" label="账号" prop="accound">
                    <el-input type="text" v-model="registerForm.accound" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="input_item" label="密码" prop="pwd">
                    <el-input type="password" v-model="registerForm.pwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="input_item" label="确认密码" prop="confirmPwd">
                    <el-input type="password" v-model="registerForm.confirmPwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="register">立即注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// 导入全局验证正则表达式
import globalReg from '@/assets/js/formReg'
// 导入注册接口
import { register } from '@/utils/api'
export default {
    name: 'st_login',
    data() { 
        //   验证找好输入是否正确
        let regAccound = (rule, value, callback) => {
            if(!globalReg.accound.test(value)) callback(new Error('账号类型错误需要6-8位数字字母组合'))
            callback()
        }
        // 验证密码输入是否正确
        let regPwd = (rule, value, callback) => {
            if(!globalReg.psw.test(value)) callback(new Error('密码类型错误需要6-8位数字字母组合'))
            callback()
        }
        // 验证确认密码是否正确
        let regConfirmPsw = (rule, value, callback) => {
            if(value != this.registerForm.pwd) callback(new Error('两次密码不一致'))
            callback()
        }
        return {
            registerForm: {
                accound: '',
                pwd: '',
                confirmPwd: ''
            },
            rules: {
                accound: [
                    {required: true, validator:regAccound, trigger: 'blur'}
                ],

                pwd: [
                    {required: true, validator: regPwd, trigger: 'blur'}
                ],

                confirmPwd: [
                    {required: true, validator: regConfirmPsw, trigger: 'blur'}
                ]
            }
        }
    },
    created() {

    },
    methods:{
        register() {
            this.$refs['registerForm'].validate((valid) => {
                if (valid) {
                    register(this.registerForm).then(res => {
                        this.$message({
                            message: '注册成功，进入登录页面',
                            type: 'success'
                        })
                        this.$router.push('/login')
                    })
                } else {
                    return false;
                }
            });
        }
    },
}
</script>

<style lang="scss" scoped>
#st_register{
    width: 100%;
    height: 100%;
    background-image: url('../../assets/imgs/back.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#registerformBox {
    width: 500px;
    background-color: #fff;
    padding: 30px;
    margin-right: 200px;
    border-radius: 20px;
    header{
        height: 70px;
        display: flex;
        justify-content: center;
        width: 80%;
        margin: 0 auto;
        section {
            flex-basis: 50%;
            text-align: center;
            cursor: pointer;
        }
    }
    .loginForm{
        flex-basis: 100%;
        height: 300px;
        .input_item{
            margin-top: 20px;
        }
        // text-align: center;
        button{
            width: 100%;
            text-align: center;
            margin-top: 40px;
        }
        /deep/ .el-form-item__content {
            margin-left: 80px !important;
        }

        /deep/ .el-form-item__label{
            width: 80px !important;
        }
    }
}
.other_job{
    display: flex;
    justify-content: space-between;
    color: #ccc;
    span {
        cursor: pointer;
    }
}
</style>